<template>
    <div>
<!--        <el-table-->
<!--                :data="tableDatas"-->
<!--                style="width: 100%">-->
<!--            <el-table-column-->
<!--                    prop="address"-->
<!--                    width="300">-->
<!--            </el-table-column>-->
<!--            <el-table-column>-->
<!--                <el-button type="primary" icon="el-icon-location-outline" style="margin-left: 980px" >地图</el-button>-->
<!--            </el-table-column>-->
<!--        </el-table>-->
        <div>
            <span>{{movie.address}}</span>
            <el-button type="primary" icon="el-icon-location-outline" style="margin-left: 980px" @click="handleMap()" >地图</el-button>

        </div>
        <div class="carousel" style="display: flex; width: 100%; justify-content: space-between; align-items: center">
<!--            <button @click="prev" style="width: 50px; height: 50px; border-radius: 50px"><</button>-->
            <el-button circle @click="prev"><</el-button>
            <el-carousel style="width: 90%" :interval="4000" type="card" height="200px" arrow="never" ref="change" :autoplay=false :loop=true indicator-position="none">
                <el-carousel-item v-for="(item,index) in lunBoList" :key="index">
                    <h3 class="medium">
                        <el-image
                            style="width: 100%; height: 100%"
                            :src="item.moviePic"
                            fit="fill"
                            @click.native="ban(index)"></el-image>
                    </h3>
                </el-carousel-item>
            </el-carousel>
<!--            <button @click="next" style="width: 50px; height: 50px; border-radius: 50px">></button>-->
            <el-button circle @click="next">></el-button>
        </div>
        <div>
            <div>{{movie.movieName}}</div>
            <div>{{movie.score/movie.peoples|toFixed}}</div>
            <div>{{movie.time+"分钟"}}</div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="1月24日" name="first"></el-tab-pane>
            <el-tab-pane label="1月25日" name="second"></el-tab-pane>
            <el-tab-pane label="1月26日" name="third"></el-tab-pane>
        </el-tabs>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column
            width="300">
                   <template slot-scope="scope">
                       <div>{{scope.row.startTime|formatDate}}</div>
                       <div>{{scope.row.endTime|formatDate}}</div>
                   </template>
            </el-table-column>
            <el-table-column
            width="300">
                <template slot-scope="scope">
                    <div>{{scope.row.language}}</div>
                    <div>{{scope.row.lobbyName}}</div>
                </template>
            </el-table-column>
            <el-table-column
            prop="money">
            </el-table-column>
            <el-table-column width="300">
                <template slot-scope="scope">
            <el-button type="danger" style="margin-left: 200px"  @click="handleSettle(scope.row)">购票</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import Vue from "vue";
    /**
     * 使用Vue过滤器，{{value | 过滤器名}}调用过滤器，执行function方法
     * 此过滤器用于为保存小数点后1位，调用toFixed方法，将‘|’前的数据传入过滤器，判断value是否合法，不合法则返回‘暂无评分’，合法则使用toFixed()方法，返回方法内指定的小数点后位数
     * */
    Vue.filter('toFixed', function (value){
        if (!value) return '暂无评分'
        return Number(value).toFixed(1)+'分'
    })
    import {formatDate} from "@/components/date";
    export default {
        name: "Shop",
        data() {
            return {
                dialogVisible: false,
                tableData: [],
                activeName: 'second',
                movie:{},
                cinema:this.$route.query.cinema,
                lunBoList: [],
                indexs: 0,


            }
        },
        filters:{
            formatDate(time){
                let date = new Date(time)
                return formatDate(date,'hh:mm')
            }
        },
        created() {
            this.handleList();
            this.handleGetLunBoList();

            // this.handleGetCinema();
        },
        methods: {
            handleClick(tab, event) {
            },
            handleList(){
                this.axios.post("web/shop/shopList", this.$route.query.cinema, {params: {movieId: this.movie.id}}).then(response=>{
                    if(response.data.code==200){
                        this.tableData=response.data.data;
                        this.movie=this.tableData[0];
                    }
                })
            },
            handleGetLunBoList(){
                axios.post("web/shop/cinemaId",this.$route.query.cinema).then(response=>{
                    this.lunBoList=response.data.data;
                })
            },
            handleNextMovie(){
                this.movie = this.lunBoList[this.index]
            },
            next(){
                this.$refs.change.next()
                if (this.indexs<=this.lunBoList.length-2){
                    this.indexs++
                }else {
                    this.indexs=0
                }
                this.handleNextMovie();
                this.handleList();
            },
            prev(){
                this.$refs.change.prev()
                if (this.indexs>0){
                    this.indexs--
                }else {
                    this.indexs=this.lunBoList.length-1
                }
                this.handleNextMovie();
                this.handleList();
            },
            ban(index){
                event.preventDefault()
            },
            handleMap(){
                this.$router.push({path:'/webMenu/map'})
            },
            handleSettle(row){
                const contract = this.row
                this.$router.push({path:'/webMenu/settlement',params:{contract:contract}})
            },
            // handleGetCinema(){
            //     axios.get("web/shop/cinemaId",{params: {cinemaId:this.$route.query.cinema}}).then(response=>{
            //         this.cinema=response.data.data;
            //     })
            // }

        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>